<template>
    <div class="goodsEntry">
      <!-- <div>库存统计表</div> -->
      <el-form :inline="true" style="padding: 20px">
         
          <el-form-item label="扫码录入日期">
              <el-date-picker
                value-format="yyyy-MM-dd HH:mm:ss"
              
                v-model="endtime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeTime">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="关键字搜索：">
          <el-input style="width: 300px;" v-model="queryData.goodsName" placeholder="请输入商品名称" size="medium"></el-input>
            
          </el-form-item>
          <!-- <el-form-item label="商品分类：">
              <el-select v-model="categoryvalue" size="medium" @change="changecatey">
                  <el-option :value="item.value" :label="item.label" v-for="item in category" :key="item.index"></el-option>
                </el-select>
              <el-select v-model="queryData.goodsKindSecond" size="medium">
                <el-option :value="item.id" :label="item.name" v-for="item in goodsKindSecond" :key="item.index"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="仓库">
              <el-select v-model="queryData.storeId" size="medium" @change="changecatey">
                  <el-option :value="item.id" :label="item.storeName" v-for="item in selectedOptions" :key="item.index"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="">
                <el-button type="primary" size="medium" @click="query">查询</el-button>
                <el-button type="primary" size="medium" @click="exportData">导出</el-button> 
              </el-form-item>
       </el-form>
 
      
      <div class="wrapper">
        <el-table class="table" :data="tableData" stripe highlight-current-row border  @selection-change="handleSelectionChange">
         
          <el-table-column
          type="index"
          width="50">
        </el-table-column>
          
          <el-table-column align="center" prop="goods_no" label="商品编码">
          </el-table-column>
          <el-table-column align="center" prop="goods_name" label="商品名称">
          </el-table-column>
          <el-table-column align="center" prop="skuNo" label="SKU编码">
            <template slot-scope="scope">
                <div style="color:#0033ff;" @click="sukData(scope.row)">{{scope.row.skuNo}}</div>
            </template>
          </el-table-column>
         </el-table-column>
          <el-table-column align="center" prop="sumPcs" label="入库总量">
            <template slot-scope="scope">
                <div style="color:#0033ff;" @click="Warehousing(scope.row)">{{scope.row.sumPcs}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="outPcs" label="出库总量">
            <template slot-scope="scope">
                <div style="color:#0033ff;" @click="outTreasury(scope.row)">{{scope.row.outPcs}}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column align="center" prop="icsPcs" label="冻结库存量">
            <template slot-scope="scope">
              <div style="color:#0033ff;" @click="frozen(scope.row)">{{scope.row.icsPcs}}</div>
            </template>
          </el-table-column> -->
          <el-table-column align="center" prop="canSalePcs" label="可销售库存">
              <template slot-scope="scope">
                  <div style="color:#0033ff;" @click="sales(scope.row)">{{scope.row.canSalePcs}}</div>
                </template>
          </el-table-column>
         
        </el-table>
        <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page.pageSize" :total="page.total" :current-page="page.current"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <el-dialog title="商品种类" :visible.sync="goodsCates.show" class="goods-dialog">
        <el-table class="dialog-table" :data="goodsCates.tableData" stripe highlight-current-row border >
         
          <el-table-column align="center" prop="goodsName" label="商品名称">
          </el-table-column>
        <el-table-column align="center" prop="goodKindFirst" label="商品类别">
          </el-table-column>
          <el-table-column align="center" prop="odorType" label="香型">
          </el-table-column>
          <el-table-column align="center" prop="netContent" label="净含量">
          </el-table-column>
          <el-table-column align="center" prop="unit" label="单位">
          </el-table-column>
          <el-table-column align="center" prop="alocohl" label="酒精度">
          </el-table-column>
         
        </el-table>
      </el-dialog>
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          height: "auto",
          queryData: {
            startTime:'',
            endTime:'',
            goodsId:'',
            goodsKindSecond:'',
            storeId:'',
            goodsName:''
          },
          categoryvalue:'',
          category:[],
          selectedOptions:[],//仓库
          goodsKindSecond:[],
          goodsCates: {
            show: false,
            tableData: [{}]
          },
          tableData: [{
            goods_id:'1',
            names:'2'
          }],
          
          endtime:'',
          page: {
            pageSize: 10,
            current: 1,
            total: 100
          }
        };
      },
      mounted () {
        this.tableList();
        this.categoryList();
        this.area();
      },
      methods: {
        //初始化数据
        async tableList() {
          try {
            // console.log(333)
            // console.log(this.$post)
            
              let { data } = await this.$post({
                api: "/show/factorypcs",
                data:{
                  current:this.page.current,
                  pageSize:this.page.pageSize,
                  startTime:this.queryData.startTime,
                  endTime:this.queryData.endTime,
                  goodsName:this.queryData.goodsName,
                  // goodsId:this.queryData.goodsId,
                  goodsKindSecond:this.queryData.goodsKindSecond,
                  status:''
                }
              });
              if (data.code === 0) {
                console.log(123)
                this.tableData = data.data;
                this.page.total = data.rdPage.total;
               
              } else {
                // this.$message({
                //   type: "error",
                //   message: data.msg
                // });
              }
            } catch (e) {
              // this.$message({
              //   type: "error",
              //   message: "接口报错"
              // });
            }
         },
        
         //商品分类接口
         async categoryList() {
            try {
              let { data } = await this.$post({
                api: "/show/leftmenu",
              });
              if (data.code === 0) { 
                this.category.push({
                  value:data.data[0].id,
                  label:data.data[0].name
                })
               
              } else {
                // this.$message({
                //   type: "error",
                //   message: data.msg
                // });
              }
            } catch (e) {
              // this.$message({
              //   type: "error",
              //   message: "接口报错"
              // });
            }
         },
         async categoryid(id) {
            try {
              let { data } = await this.$post({
                api: "/show/propertyInfo",
                data:{
                  id:id
                }
              });
              if (data.code === 0) {
               
               
                this.goodsKindSecond = data.data.attrKeyList;
              } else {
                // this.$message({
                //   type: "error",
                //   message: data.msg
                // });
              }
            } catch (e) {
              // this.$message({
              //   type: "error",
              //   message: "接口报错"
              // });
            }
         },
         //仓库
         async area() {
              try {
                let { data } = await this.$post({
                  api: "/show/store/area"
                  
                });
                if (data.code === 0) {
                  this.selectedOptions = data.data;
                
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           async skuinfoById(id) {
              try {
                let { data } = await this.$post({
                  api: "/show/skuinfo",
                  data:{
                    skuNo:id
                  }
                });
                if (data.code === 0) {
                  console.log(data)
                  this.goodsCates.tableData = data.data
                  // this.selectedOptions = data.data;
                
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                // this.$message({
                //   type: "error",
                //   message: "接口报错"
                // });
              }
           },
           //导出
       async goodsexcel() {
        try {
          let { data } = await this.$post({
            api: "/import/factorypcs",
            data:{
              // current:this.page.current,
              // pageSize:this.page.pageSize,
              startTime:this.queryData.startTime,
              endTime:this.queryData.endTime,
              goodsId:this.queryData.goodsId,
              status:0,
              goodsKindSecond:this.queryData.goodsKindSecond
            }
          });
          if (data.code === 0) {
            let urlstr = url+data.data.replace('static/','');
            window.location.href=urlstr;
          this.$message({
            type: "success",
            message: data.msg
          });
          console.log(urlstr)
          } else {
            this.$message({
              type: "error",
              message: data.msg
            });
          }
        } catch (e) {
          this.$message({
            type: "error",
            message: "接口报错"
          });
        }
     },
         changecatey(id){
          this.categoryid(id)
           console.log(id)
         },
         //全选
         handleSelectionChange(val){
           console.log(val)
         },
        //查询
        query() {
          this.tableList();
         },
        //导出
        exportData(){
          this.$confirm("确认将导出记录，您确定要导出吗?", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.goodsexcel();
          
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消导出"
          });
        });
        },
        sukData(row){
          this.skuinfoById(row.skuNo)
          this.goodsCates.show = true;
        },
        //冻结
        frozen(row){
          this.$router.push('/frozenStock')
        },
        //可销售
        sales(row){
          this.$router.push('/merchantability/'+row.skuNo)
        },
        //入库
        Warehousing(row){

          this.$router.push('/FactoryEntryListDetail/'+row.skuNo)
        },
        //出库
        outTreasury(row){
          this.$router.push('/outMangement/'+row.skuNo)
        },
        //确定录入
        okentry(){
          this.$router.push('/goodsEntry/detail')
        },
        canceloffAll() {
          this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        },
        canceloffOne(id) {
          this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
        },
        handleCurrentChange(val) {
          this.page.current = val;
          this.tableList();
          console.log(val);
        },
        showCateDialog() {
          this.goodsCates.show = true;
        },
        //时间选择器
        changeTime(arr){
          if(arr != null){
            this.queryData.startTime = arr[0];
            this.queryData.endTime = arr[1];
          }
          console.log(arr)
          
        }
      }
    };
  </script>
  
  <style lang="scss" scoped>
    .query {
      overflow: hidden;
      border-bottom: 1px solid #eeeeee;
      &-item {
        float: left;
        margin: 15px 20px;
      }
      .el-input {
        width: 150px;
      }
      .el-button {
        margin: 0 15px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  
    .entry-info {
      padding: 15px 20px;
      border-bottom: 1px solid #eeeeee;
    }
  
    .goods-category {
      line-height: 32px;
      span {
        color: #0033ff;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  
    .goods-count {
      line-height: 32px;
    }
  
    .goods-id {
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      span {
        position: relative;
        display: inline-block;
        padding: 8px 15px;
        border: 1px solid #333;
        &:after {
          content: "";
          position: absolute;
          top: -6px;
          left: -6px;
          width: 100%;
          height: 100%;
          padding: 6px;
          border: 1px solid #333;
        }
      }
    }
  
    .wrapper {
      padding: 10px 15px;
    }
  
    .canceloff-btn {
      color: #0033ff;
      cursor: pointer;
    }
  </style>